<template>
  <div style="position: relative">
    <div
      @click="state.isShow = true"
      style="
        cursor: pointer;
        float: right;
        margin-right: 15px;
        margin-top: 10px;
        color: #2e5cf6;
        font-size: 17px;
      "
    >
      预览
    </div>
    <div style="border: 1px solid #ccc; width: 100% !important">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        mode="default"
      />
      <Editor
        style="overflow-y: hidden"
        :style="{ height }"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        mode="default"
        @onCreated="handleCreated"
        @on-change="handleChange"
      />
    </div>
  </div>
  <x-dialog
    v-model="state.isShow"
    width="100rem"
    :title="'预览'"
    @close="state.isShow = false"
  >
    <div v-html="valueHtml" class="pDialog"></div>
  </x-dialog>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { getToken } from '@/utils/auth'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { ref, shallowRef, onBeforeUnmount, watch, reactive } from 'vue'
const baseUrl = ref(import.meta.env.VITE_APP_BASE_API + '/common/upload')
const { proxy } = getCurrentInstance()

const props = defineProps({
  modelValue: [String, Object, Array],

  height: {
    type: String,
    default: '500px',
  },
  width: {
    type: String,
    default: '100%',
  },
  // 文件类型, 例如['png', 'jpg', 'jpeg']
  fileType: {
    type: Array,
    default: () => ['png', 'jpg', 'jpeg'],
  },
})

const emit = defineEmits(['update:modelValue'])
const valueHtml = ref(props.modelValue)

watch(
  () => props.modelValue,
  (newValue, oldValue) => {
    valueHtml.value = newValue
    console.log('watch 已触发', newValue)
  }
)
// 状态及其他变量,预览效果
const state = reactive({
  loading: false, // 列表加载状态
  title: '新增', // 弹窗标题
  isShow: false, // 弹窗状态
  total: 0, // 列表总量
})

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

const toolbarConfig = {
  excludeKeys: [
    'headerSelect',
    'italic',
    'group-more-style', // 排除菜单组，写菜单组 key 的值即可
    'group-video',
  ],
}

const editorConfig = {
  placeholder: '请输入内容...',
  readOnly: false,
  MENU_CONF: {},
}

//使用base64方式上传文件
editorConfig.MENU_CONF['uploadImage'] = {
  // 上传图片地址
  server: baseUrl.value,
  // form-data fieldName ，默认值 'wangeditor-uploaded-image'
  fieldName: 'file',
  // 单个文件的最大体积限制，默认为 2M
  maxFileSize: 1 * 1024 * 1024, // 1M
  // 最多可上传几个文件，默认为 100
  maxNumberOfFiles: 10,
  // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
  allowedFileTypes: [
    'bmp, gif, jpg, jpeg, png, doc, docx, xls, xlsx, ppt, pptx, html, htm, txt, rar, zip, gz, bz2, mp4, avi, rmvb, mp3, pdf',
  ],

  // 将 meta 拼接到 url 参数中，默认 false
  metaWithUrl: false,
  // 自定义增加 http  header
  headers: {
    Authorization: 'Bearer ' + getToken(),
  },
  // 跨域是否传递 cookie ，默认为 false
  withCredentials: true,
  // 超时时间，默认为 10 秒
  timeout: 5 * 1000, // 5 秒
  // 上传之前触发
  onBeforeUpload(file) {
    return file
  },
  // 上传进度的回调函数
  onProgress(progress) {
    // onProgress(progress) {
    // progress 是 0-100 的数字
    console.log('progress', progress)
  },

  // 上传图片回显
  customInsert(res, insertFn) {
    console.log(res.url, '--')

    insertFn(res.url)
  },
  // 单个文件上传成功之后
  onSuccess(file, res) {
    // onSuccess(file, res) {
    console.log(`${file.name} 上传成功`, res)
  },
  // 单个文件上传失败
  onFailed(file, res) {
    // onFailed(file, res) {
    console.log(`${file.name} 上传失败`, res)
  },
  // 上传错误，或者触发 timeout 超时
  onError(file, err, res) {
    // onError(file, err, res) {
    console.log(`${file.name} 上传出错`, err, res)
  },
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}
//富文本发生变化后，把内容传给父组件
const handleChange = (editor) => {
  console.log(editor.getHtml())

  emit('update:modelValue', editor.getHtml())
}
</script>

<style scoped lang="scss">
.pDialog {
  ::v-deep img {
    width: 100%;
  }
}
</style>
